<div class="fullscreen" nz-row>
    <div class="outer-panel" nz-col nzSpan="6">
        <div class="inner-panel">
            <div class="org-user-tree-panel">
                <ou-org-user-tree-select-panel
                    (selectNode)="selectNode($event)"
                    [searchConfig]="searchConfig"
                    [showSearch]="true">
                </ou-org-user-tree-select-panel>
            </div>
            <div class="setting-panel">
                <nz-checkbox-group
                    (ngModelChange)="settingChange($event)"
                    [(ngModel)]="settingOptions">
                </nz-checkbox-group>
            </div>
        </div>
    </div>
    <div class="outer-panel" nz-col nzSpan="18">
        <div class="inner-panel">
            <ng-container *ngIf="activeNode?.origin.type === 'root'">
                <ou-org-root-tabset
                    (dataChange)="dataChange($event)"
                    (itemClickEvent)="itemClick($event)">
                </ou-org-root-tabset>
            </ng-container>
            <ng-container *ngIf="activeNode?.origin.type === 'ORG'">
                <ou-org-tabset
                    (dataChange)="dataChange($event)"
                    (itemClickEvent)="itemClick($event)"
                    [orgId]="activeNode.origin.data.orgId">
                </ou-org-tabset>
            </ng-container>
            <ng-container *ngIf="activeNode?.origin.type === 'DEPT'">
                <ou-dept-tabset
                    (dataChange)="dataChange($event)"
                    (itemClickEvent)="itemClick($event)"
                    [orgId]="activeNode?.origin.data.orgId">
                </ou-dept-tabset>
            </ng-container>
            <ng-container *ngIf="activeNode?.origin.type === 'USER'">
                <ou-user-detail
                    (dataChange)="dataChange($event)"
                    [userId]="activeNode?.key">
                </ou-user-detail>
            </ng-container>
        </div>
    </div>
</div>
